<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="../../static/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../static/bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>

    <style>

        .zong_1{
            position: relative;
            display: block;
            text-align: center;
            margin: 0 -100px;
            padding: 0;
            width: 1300px;
        }

        /* 头部部分 */
        .col{
            position: relative;
            min-height: 1px;
            padding: 1px 15px;
            display: inline-block;
            line-height: 100px;
            margin: 0px auto;
        }
        .list{
            float: right;
            font-size: 1.5em;
            list-style: none;
            position: relative;
            margin: 4px 40px;
            padding: 0;

        }
        .list>li{
            display: inline;
            margin: 0px auto;
            padding: 0px 20px;
            color: #646b82;
        }

        /* 导航部分 */
        .top-nav-left a{
            font-size: 20px;
        }

        /*购物车部分*/
        .con{
            width: 990px;
            position: relative;
            margin: 0px auto;
            padding: 0;
            top: 10px;
        }
        .head_h{
            position: relative;
            text-align: left;
        }
        .cart_1{
            font-size: 20px;
            width: 100px;
            position:relative;
            margin-left: 10px;
            left: -18px;
        }
        .cart_1_num{
            text-align: right;
            font-size: 20px;
            width: 100px;
            position:relative;
            margin-left: 10px;
        }
        .cart_table{
            position: relative;
            margin: 0;
            padding: 0;
            border-collapse: collapse;
            width: 950px;
        }
        .cart_body{
            border-top: 1px dashed #ccc;
        }
        .cart_body_zong{
            height: 85px;
            position: relative;
            left: -10px;
        }
        .cart_2{
            position: relative;
            text-align: center;
            margin: 0px 0px;
            padding: 0;
            line-height: 85px;
            overflow: auto;
        }
        .cart_2_img{
            position: relative;
            display: block;
            text-align: left;
        }
        .cart_2_img img{
            width: 80px;
            height: 80px;

        }
        .cart_2_img span{
            position: relative;
            margin: 0 -25px;
            padding: 0;
            width: 200px;
        }
        .cart_2_btn{
            width: 160px;
            position: relative;
            margin: 10px auto;
            padding: 17px 0;
            text-align: center;
        }
        .reduce{
            width: 26px;
            height: 26px;
        }
        .add{
            width: 26px;
            height: 26px;
        }
        .cart_2_p{
            font-size: 20px;
            position: relative;
            text-align: center;
            margin: 16px auto;
            padding: 0;
            width: 50px;
            height: 50px;
            left: -60px;
        }
        .cart_2_p span{
            font-size: 20px;
            line-height: 50px;
        }
        .cart_2_del{
            position: relative;
            text-align: center;
            margin: 25px auto;
            padding: 0;
        }
        .panel_bar{
            width: 100%;
            height: 50px;
            position: relative;
            margin: 0 0;
            padding: 0;
            background: #b0ceff;
        }
        .panel_bar_left_1{
            position: relative;
            width: 525px;
            margin: 12px 40px;
            padding: 0;
            font-size: 16px;
            font-weight: 500;
        }
        .panel_bar_left_2{
            position: relative;
            left: -50px;
            display: block;
            width: 191px;
            line-height: 50px;
            font-size: 18px;
            font-weight: 600;
        }
        .panel_set{
            position: relative;
            margin: 3px 10px;
            padding: 0;
        }
        .panel_set input{
            position: relative;
            width: 110px;
            height: 50px;
            margin: 7px 35px;
            padding: 0;
        }

        .goods_name{
            position: relative;
            left: 50px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="zong_1">
        <header class="header">
            <div class="row">
                <div class="col-md-3 col"></div>
                <div class="col-md-9 col">
                    <ul class="list">
                        <li>
                            <a href="http://localhost:8080/bIndex"><span class="glyphicon glyphicon-home"></span>主页</a>
                        </li>
                        <li>
                            <a href="http://localhost:8080/goOrders"><span class="glyphicon glyphicon-calendar"></span>订单</a>
                        </li>
                        <li>
                            <a href="http://localhost:8080/selAddress"><span class="glyphicon glyphicon-calendar"></span>地址管理</a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <section>
            <div class="form-group container" style="width: 990px;">
                <label for="cata" style="font-size: 35px">请选择收货地址</label>
                <select class="form-control" id="cata" style="font-size: 20px;padding: 0 20px;">
                    <option value="请选择地址...">请选择地址...</option>
                    <option th:each="add:${list1}">

                        <p>
                            <span th:text="${add.id}"></span>
                            <span th:text="${add.name}"></span>
                            <span th:text="${add.phone}"></span>
                            <span th:text="${add.address}"></span>
                        </p>
                    </option>
                </select>
            </div>
            <div class="container">
                <div class="con">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="head_h">
                                <h3 class="panel-title fa fa-shopping-cart" style="font-size: 20px"> 购物车</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="cart_table">
                                <div class="row">
                                    <div class="col-md-1 col-sm-1 col-xs-1">
                                        <div class="cart_1">
                                            <input id="input1" type="checkbox" onclick="chooseAll_click()"> <span id="input1_text">全选</span>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-5 col-xs-5">
                                        <div class="cart_1" style="position:relative;margin: 0 auto;">
                                            <span style="position:relative;left: 0px;">商品</span>
                                        </div>
                                    </div>
                                    <div class="col-md-1 col-sm-1 col-xs-1">
                                        <div class="cart_1" style="text-align: left">
                                            <span>单价</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                        <div class="cart_1_num">
                                            <span>数量</span>
                                        </div>
                                    </div>
                                    <div class="col-md-1 col-sm-1 col-xs-1">
                                        <div class="cart_1" style="text-align: left">
                                            <span id="sub-1" style="position:relative;left: -30px;">小计</span>
                                        </div>
                                    </div>
                                    <div class="col-md-1 col-sm-1 col-xs-1">
                                        <div class="cart_1" style="text-align: left">
                                            <span>操作</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="cart_body" id="cart_body_1">
                                <div class="cart_body_zong">
                                    <div class="row" th:each="goods:${list}">
                                        <div class="col-md-1 col-sm-1 col-xs-1">
                                            <div class="cart_2">
                                                <input class="input2" type="checkbox" th:id="${goods.id}" onclick="choose_click()">
                                            </div>
                                        </div>
                                        <div class="col-md-5 col-sm-5 col-xs-5">
                                            <div class="cart_2">
                                                <div class="cart_2_img">
                                                    <a th:href="'http://localhost:8080/detail?id='+${goods.goodsId}">
                                                        <img th:src="${goods.imgurl}">
                                                        <span class="goods_name" th:text="${goods.name}"></span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-1 col-xs-1">
                                            <div class="cart_2">
                                                ￥<span th:id="'price_'+${goods.id}" th:text="${goods.price}"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-3 col-xs-3">
                                            <div class="cart_2_btn">
                                                <input class="reduce" type="button" value="-" th:placeholder="${goods.id}">
                                                <input class="num_text" th:id="'num_text'+${goods.id}" type="text" size="2" th:value="${goods.num}" th:placeholder="${goods.id}">
                                                <input class="add" type="button" value="+" th:placeholder="${goods.id}">
                                            </div>
                                        </div>
                                        <div class="hide" th:id="'hide'+${goods.id}" th:text="${goods.num}">0</div>
                                        <div class="col-md-1 col-sm-1 col-xs-1">
                                            <div class="cart_2_p">
                                                ￥<span th:id="'cast'+${goods.id}" th:text="${goods.sumPrice}">0</span>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-1 col-xs-1">
                                            <div class="cart_2_del">
                                                <a th:href="'http://localhost:8080/deleteCartGoods?id='+${goods.id}" class="btn btn-danger">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            <div class="panel_bar">
                                <div class="panel_bar_left">
                                    <div class="row">
                                        <div class="col-md-8 col-sm-8 col-xs-8 panel_bar_left_1"></div>
                                        <div class="col-md-2 col-sm-2 col-xs-2 panel_bar_left_2">
                                            <span>已选商品</span>
                                            <span id="panel_count">0</span>
                                            <span>件</span>
                                        </div>
                                        <div class="col-md-2 col-sm-2 col-xs-2 panel_bar_left_2">
                                            <span>总价</span>
                                            <span id="panel_sum">0</span>
                                            <span>元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <span class="pull-right panel_set">
                                        <form action="">
                                            <input id="btn-submit" class="btn btn-primary" type="submit" value="提交订单" style="font-size: 24px">
                                        </form>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
    </div>
</div>


</body>
<script type="text/javascript" src="../../static/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../../static/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../../static/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../../static/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../../static/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../../static/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript" src="../../static/bootstrap3/js/jquery.js"></script>
<script>
    /* 全选 */
    function chooseAll_click() {
        let status = $("#input1").prop("checked");
        $(".input2").prop("checked",status);
        $("#input1_text").text(status?"取消全选":"全选")
        total();
        total_num();
    }

    /* 单选时全选的改变 */
    function choose_click() {
        let count = 0;
        $(".input2").each(function () {
            if ($(this).prop("checked")){
                count++;
            }
        });
        $("#input1").prop("checked",count==$(".input2").size());
        $("#input1_text").text($("#input1").prop("checked")?"取消全选":"全选");
        total();
        total_num();
    }

    /* 小计 */
    function sum(id) {
        let a = parseInt($("#price_"+id).text());
        let b = parseInt($("#num_text"+id).val());
        $("#cast"+id).text(a*b);
    }

    /* 总计金额 */
    function total() {
        let total = 0;
        $(".input2").each(function () {
            if ($(this).prop("checked")){
                //获取该input的id值
                let a = this.getAttribute("id");
                let b = $("#cast"+a).text();
                total +=parseInt(b);
            }
        });
        $("#panel_sum").text(total);
    }
    /* 总计数量 */
    function total_num(){
        let count = 0;
        $(".input2").each(function () {
            if ($(this).prop("checked")){
                let i = parseInt($(this).attr("id"));
                count+=parseInt($("#hide"+i).text());
            }
        });
        $("#panel_count").text(count);
    }

    
    /* 添加商品数量 */
    $(".add").click(function () {
        let id = this.placeholder
        let a = parseInt($(this).prev().val())+1;
        $("#num_text"+id).val(a);
        $("#hide"+id).text(a);
        $.ajax({
            type:'post',
            url:'changeNum',
            data:{'id':id,'num':a},
        })
        sum(id)
        total();
        total_num();
    })
    /* 减少商品数量 */
    $(".reduce").click(function () {
        let id = this.placeholder
        let a = parseInt($(this).next().val())-1;
        if(a<=0){a=0}
        $("#num_text"+id).val(a);
        $("#hide"+id).text(a);
        $.ajax({
            type:'post',
            url:'changeNum',
            data:{'id':id,'num':a},
        })
        sum(id)
        total();
        total_num();
    })
    /* 更改商品数量 */
    $(".num_text").blur(function () {
        let id = this.placeholder
        let a = $("#num_text"+id).val();
        if(a<=0||a==null){
            a=0;
        }
        a = parseInt(a);
        $("#num_text"+id).val(a);
        $("#hide"+id).text(a);
        $.ajax({
            type:'post',
            url:'changeNum',
            data:{'id':id,'num':a},
        })
        sum(id)
        total();
        total_num();
    })

    /* 提交订单 */
    let address = "";
    $("#cata").blur(function () {
        address = this.value;
    })
    let arr = new Array(10);
    $("#btn-submit").click(function () {
        let i = 0;
        $(".input2").each(function () {
            if ($(this).prop("checked")){
                arr[i] = this.id;
                i++;
            }
        });
        if (address==""){
            alert("请选择收货地址!")
            return false;
        }
        console.log(arr)
       $.ajax({
           type:'post',
           url:'addOrders',
           traditional:true,
           dataType: "json",
           data:{'arr':arr,'address':address}
       })
        alert("提交成功")

    });

</script>
</html>